<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-row class="row-bg" justify="space-between">
          <el-col :span="6" class="logo">
            <img src="./assets/logo.jpg" alt="">
          </el-col>
          <el-col :span="6">
            <div class="grid-content ep-bg-purple-light" />
          </el-col>
          <el-col :span="6">
             <el-dropdown>
        <el-button type="primary">
          叶凡<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item>账户与安全</el-dropdown-item>
            <el-dropdown-item>常见问题</el-dropdown-item>
            <el-dropdown-item>关于我们</el-dropdown-item>
            <el-dropdown-item divided coommed="logout">注销</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="150px">
          <Menu></Menu>
        </el-aside>
        <el-main>
          <!--所有页面的出口-->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import Menu from './components/Menu.vue';
</script>
<style scoped>
.el-header {
  background: #c6e2ff;
  height: 40px;
  padding-left: 0px;
  padding-right: 0px;
}
.logo img{
  width: 150px;
  height: 40px;
}
.el-button--primary {
  --el-button-bg-color: #c6e2ff;
  --el-button-border-color: #c6e2ff;
}
.el-dropdown{
  float: right;
  padding-top: 3px;
}
.el-button{
  font-size: 13px !important;
}

</style>
